<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBack"></a>
			<h1 class="mui-title">请假申请</h1>
		</header>
		<div id="leave" class="mui-content otherContent asignCommon">
			<form name="form" @submit.prevent="handleSubmit">
				<ul class="mui-table-view commonList require marginBorder">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right mui-input-row" @click="impressType">
							<label for="">人员类别</label>
							<input type="text" class="input" placeholder="请选择(必填)" :value="type" v-model="type" readonly />
						</a>
					</li>
				</ul>
				<ul class="mui-table-view commonList require marginBorder">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right mui-input-row" @click="leaveType">
							<label for="">请假类型</label>
							<input type="text" class="input" placeholder="请选择(必填)" :value="leavetype" v-model="leavetype" readonly />
						</a>
					</li>
				</ul>
				<ul class="mui-table-view commonList require marginBorder">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right mui-input-row" @click="hasClass">
							<label for="">是否有课</label>
							<input type="text" class="input hasClasses" name="" placeholder="请选择(必填)" :value="hasclass" v-model="hasclass" readonly />
						</a>
					</li>
				</ul>
				<!--选择开始时间与结束时间-->
				<ul class="mui-table-view commonList marginBorder">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right mui-input-row" @click="startTime">
							<label for="">请假开始时间</label>
							<input type="text" class="start-time input" :value="starttime" placeholder="请选择(必填)" v-model="starttime" readonly>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right mui-input-row" @click="endTime">
							<label for="">请假结束时间</label>
							<input type="text" class="end-time input" :value="endtime" placeholder="请选择(必填)" v-model="endtime" readonly >
						</a>
					</li>
				</ul>
				<ul class="mui-table-view commonList require marginBorder">
					<li class="mui-table-view-cell">
						<a class="noRight mui-input-row">
							<label for="">请假天数</label>
							<input type="number" class="input leaveDays" placeholder="请输入(必填)" v-model="leaveDays" oninput="(function(obj){
							var regStrs = [
							['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位为0  
							['[^\\d\\.]+$', ''], //禁止录入任何非数字和点  
							['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点  
							['^(\\d+\\.\\d{1}).+', '$1'] //禁止录入小数点后一位以上  
							];
							for(var i = 0; i < regStrs.length; i++) {
								var reg = new RegExp(regStrs[i][0]);
								obj.value = obj.value.replace(reg, regStrs[i][1]);
							}
							})(this)" />
						</a>
					</li>
				</ul>

				<div class="repair mui-clearfix mui-input-row require">
					<label class="specialLabel">请假内容</label>
					<textarea class="input" name="" rows="" cols="" placeholder="请输入(非必填)" maxlength="200" v-model="leaveReason"></textarea>
				</div>
				<span class="submit">
			        <fieldset style="border:none;">
			        	<button>提交</button>
			        </fieldset>
			   </span>
			</form>
		</div>
	</div>
</template>
<script>
	import axios from 'axios'
	import {
		loadFromLocal
	} from '@/service/store';
	import {
		getFlowData
	} from '@/service/getData';
	export default {
		data() {
				return {
					myUser: loadFromLocal("myUser", "obj"),
					type: "",
					leavetype: "",
					hasclass: "",
					starttime: "",
					endtime: "",
					leaveDays: "",
					leaveReason: "",
					instanceId: '',
					WorkflowId: ''
				}
			},
			created() {
				let sRoute = this.$route.params.Id.split('&');
				this.instanceId = sRoute[1] == 'null' ? "" : sRoute[1];
				this.WorkflowId = sRoute[0];
//				alert(this.WorkflowId)
				if(this.instanceId) {
					getFlowData({
						InstanceID: this.instanceId
					}).then((res) => {
						this.type = res.data.info['人员类别'];
						this.leavetype = res.data.info['请假类别'];
						this.hasclass = res.data.info['是否有课'];
						this.starttime = res.data.info['请假开始时间'];
						this.endtime = res.data.info['请假结束时间'];
						this.leaveDays = res.data.info['请假天数'];
						this.leaveReason = res.data.info['请假原因'];
						this.WorkflowId = res.data.info.FlowID;
					});
				}

			},
			vuerify: {
				type: {
					test: 'required',
					message: '人员类别必填'
				},
				leavetype: {
					test: 'required',
					message: '请假类型必填'
				},
				hasclass: {
					test: 'required',
					message: '是否有课必填'
				},
				starttime: {
					test: 'required',
					message: '请假开始时间必填'
				},
				endtime: {
					test: 'required',
					message: '请假结束时间必填'
				},
				leaveDays: {
					test: 'required',
					message: '请假天数必填'
				}
			},
			methods: {
				//人员类别
				impressType() {
					let self = this;
					let impressType = new mui.PopPicker();
					impressType.setData([{
						value: '1',
						text: '教师'
					}, {
						value: '2',
						text: '班主任'
					}, {
						value: '3',
						text: '行政人员'
					}]);
					impressType.show(function(selectItems) {
						self.type = selectItems[0].text;
					})
				},
				//请假类型
				leaveType() {
					let self = this;
					let leaveType = new mui.PopPicker();
					leaveType.setData([{
						value: '1',
						text: '公假'
					}, {
						value: '2',
						text: '产假'
					}, {
						value: '3',
						text: '事假'
					}, {
						value: '4',
						text: '病假'
					}]);
					leaveType.show(function(selectItems) {
						self.leavetype = selectItems[0].text;
					})
				},
				//是否有课
				hasClass() {
					let self = this;
					let hasClass = new mui.PopPicker();
					hasClass.setData([{
						value: '1',
						text: '有课'
					}, {
						value: '2',
						text: '无课'
					}]);
					hasClass.show(function(selectItems) {
						self.hasclass = selectItems[0].text;
					})
				},
				//请假开始时间
				startTime() {
					let self = this;
					//				if(!dtPicker) { //开始
					let dtPicker = new mui.DtPicker({
						type: 'datetime',
						beginDate: new Date("2000-01-01 00:00")
					});
					//				}
					dtPicker.show(function() {
						self.starttime = this.getSelected().text;
						self.endtime = "";
					})
				},
				//请假结束时间
				endTime() {
					let self = this;
					if(self.starttime) {
						//请假结束时间从 选择的开始时间开始
						let dtPicker1 = new mui.DtPicker({
							type: 'datetime',
							beginDate: new Date(self.starttime)
						})
						dtPicker1.show(function() {
							self.endtime = this.getSelected().text;
						})
					}

				},
				handleSubmit() {
					if(this.$vuerify.check()) { // 手动触发校验所有数据
						// do something
						console.log(this.WorkflowId)
						let self = this;
						axios({
							url: window.host + '/Workflow/GeneralApply/Initiate',
							method: 'post',
							data: {
								"userId": this.myUser.userId,
								"schoolId": this.myUser.schoolId,
								"WorkflowId": this.WorkflowId,
								"FormData": JSON.stringify({
									"请假类别": this.leavetype,
									"请假开始时间": this.starttime,
									"请假结束时间": this.endtime,
									"是否有课": this.hasclass,
									"请假天数": this.leaveDays,
									"请假原因": this.leaveReason,
									"人员类别": this.type,
									"InstanceID": this.instanceId
								})
							},
							transformRequest: [function(data) {
									// Do whatever you want to transform the data
									let ret = ''
									for(let it in data) {
										ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
									}
									return ret
								}]
								//						headers: {
								//							'Content-Type': 'application/x-www-form-urlencoded'
								//						}
						}).then(function(res) {					
							self.$router.push({
								name: 'Office',
								params: {
									token: self.myUser.token,
									schoolId: self.myUser.schoolId,
									userId: self.myUser.userId
								}
							})
						})
					} else {
						// 返回直接定义在该对象上的可枚举属性
						for(var i in this.$vuerify.$errors) {
							if(this.$vuerify.$errors.hasOwnProperty(i)) {
								mui.toast(this.$vuerify.$errors[i]);
								return false;
							}
						}
					}
				}
			}
	}
</script>
<style>

</style>